<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <div class="">
        <van-field required v-model="postData.school_Na" size="large" label="学校名称" maxlength="20" placeholder="请填写" style="font-size: 16px" />

        <van-field required readonly clickable size="large" :value="eduVal" label="学历水平" placeholder="请选择" style="font-size: 16px" @click="showPicker_edu = true" />
        <van-popup v-model="showPicker_edu" round position="bottom">
          <van-picker title="学历水平" show-toolbar :columns="picker_edu_data" :default-index="picker_edu_defaultIndex" value-key="codeValue" @confirm="onPickerEduSubmit" @cancel="showPicker_edu = false" />
        </van-popup>

        <van-field readonly required clickable size="large" :value="eduStartDate" label="入学时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_eduStartDate = true" />
        <van-popup v-model="showPicker_eduStartDate" round position="bottom">
          <van-datetime-picker v-model="picker_eduStartDate_current" :min-date="picker_eduStartDate_minDate" :max-date="picker_eduStartDate_maxDate" type="date" title="入学时间" @confirm="onPickerEduStartDateSubmit" @cancel="showPicker_eduStartDate = false" />
        </van-popup>

        <van-field readonly required clickable size="large" :value="eduEndDate" label="毕业时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_eduEndDate = true" />
        <van-popup v-model="showPicker_eduEndDate" round position="bottom">
          <van-datetime-picker v-model="picker_eduEndDate_current" :min-date="picker_eduEndDate_minDate" :max-date="picker_eduEndDate_maxDate" type="date" title="毕业时间" @confirm="onPickerEduEndDateSubmit" @cancel="showPicker_eduEndDate = false" />
        </van-popup>

        <van-field readonly clickable required size="large" :value="zyVal" label="所学专业" placeholder="请选择" style="font-size: 16px" @click="showPicker_zy = true" />
        <van-popup v-model="showPicker_zy" round position="bottom">
          <van-cascader title="所学专业" :options="select_zy_data" active-color="#05A6F0" :value="picker_zy_defaultIndex" @finish="onPickerZYSubmit" @close="showPicker_zy = false" />
        </van-popup>

        <div class="resume-content-tip">
          <span>简短描述</span>
          <van-field v-model="postData.content" show-word-limit maxlength="100" rows="10" autosize type="textarea" placeholder="简短描述" style="font-size: 16px; color: #333; line-height: 22px" />
        </div>

        <div style="margin: 16px;display: flex;justify-content: center;flex-direction: column;">
          <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" :disabled="disabled_submit" @click="onSubmit">
          </van-button>
          <span style="display: flex;justify-content: center;margin-top: 16px;color: #ccc;font-size: 15px;" @click="onNext">跳过</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {Field,Picker,Popup,Button,Toast,DatetimePicker,Cascader} from "vant";
import {getDoubleArrayMix} from "@/util/selectData";
export default {
  name: "ResumeQuick2",
  components: {
    NavBar,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Cascader.name]: Cascader,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      postData: {
        id: 0,
				school_Na:'',
        level_Edu: '',
				educationID:'',
				date_Time:'',
        specialty: '',
        content: '',
      },
			eduStartDate: '',
      eduEndDate: '',

      showPicker_edu: false,
      picker_edu_data: this.$bd.edu,
      picker_edu_defaultIndex: 0,

      showPicker_eduStartDate: false,
      picker_eduStartDate_current: new Date(2000, 0, 1),
      picker_eduStartDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_eduStartDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_eduEndDate: false,
      picker_eduEndDate_current: new Date(2000, 0, 1),
      picker_eduEndDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_eduEndDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_zy: false,
      picker_zy_defaultIndex: "",
			eduVal:'',
			zyVal:'',
      loading_submit: false,
    };
  },
  mounted() {
		this.getEdu();
  },
  computed: {
		datetime(){return `${this.eduStartDate}/${this.eduEndDate}`;},
    select_zy_data() {
      return getDoubleArrayMix(this.$bd.specialtyGrade1, this.$bd.specialtyGrade2);
    },
    disabled_submit() {
      if (this.postData.school_Na != "" &&this.postData.level_Edu != "" &&this.postData.specialty != "" &&this.eduStartDate != "" &&this.eduEndDate != ""){return false;}return true;
    },
  },
  // 方法集合
  methods: {
		//获取
		getEdu(){
			this.$api.get('/Resume/GetEdu').then(res=>{
				if(res.success){
					this.postData.id = res.response.id,
					this.postData.school_Na = res.response.school_Na;
					this.postData.level_Edu = res.response.level_Edu;
					this.eduVal = res.response.level_EduValue;
					this.eduStartDate = res.response.fmEduStartDate;
					this.eduEndDate = res.response.fmEduEndDate;
					this.postData.specialty = res.response.specialty;
					this.zyVal = res.response.specialtyValue;
					this.postData.content = res.response.content;
				}
			})
		},
    //学历
    onPickerEduSubmit(item) {
      this.showPicker_edu = false;
      this.postData.level_Edu = item.code;
			this.eduVal = item.codeValue
    },
    //入学时间
    onPickerEduStartDateSubmit(value) {
      this.showPicker_eduStartDate = false;
      this.eduStartDate = this.$dayjs(value).format("YYYY-MM");
    },
    //毕业时间
    onPickerEduEndDateSubmit(value) {
      this.showPicker_eduEndDate = false;
      this.eduEndDate = this.$dayjs(value).format("YYYY-MM");
    },
    //专业
    onPickerZYSubmit({value,selectedOptions}) {
      this.showPicker_zy = false;
      this.postData.specialty = value;
			this.zyVal = selectedOptions[1].text;
    },
    //提交
    onSubmit() {
      this.loading_submit = true;
			this.postData.date_Time = this.datetime;
			this.$api.post('/Resume/SaveEdu',this.postData).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success(res.msg);
					this.onNext();
				}
				else{
					Toast('保存失败')
				}
			})
    },
    onNext() {
      this.$router.push({ name: "person-resume-resumequick3" });
    },
  },
};
</script>

<style scoped>
.resume-content-tip {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.resume-content-tip span {
  padding: 16px 16px 8px;
  font-size: 16px;
  color: #646566;
  line-height: 16px;
}
</style>
